<template>
  <div class="home-page">
    <h1>首页</h1>

    <!-- 搜索栏 -->
    <el-input
      class="search-bar"
      placeholder="请输入搜索内容"
      v-model="searchQuery"
      clearable
      @keyup.enter="goToSearchResult"
    >
      <template #append>
        <el-button icon="search" @click="goToSearchResult"></el-button>
      </template>
    </el-input>

    <!-- 更多社团链接 -->
    <div class="more-clubs">
      <el-link href="#" @click.prevent="goToClubList">
        更多社团<el-icon><More /></el-icon> <!-- Element Plus 图标 -->
      </el-link>
    </div>

    <!-- 排行榜 -->
    <div class="rankings-wrapper">
      <el-row :gutter="20" class="rankings-row">
        <el-col :span="8" v-for="(ranking, index) in rankings" :key="index">
          <div class="ranking-category">
            <h2 class="ranking-title">{{ ranking.title }}</h2>
            <ul class="ranking-list">
              <li class="ranking-item" v-for="item in ranking.items" :key="item.id">
                <span class="ranking-position">{{ item.position }}</span>
                <el-icon><Star /></el-icon> <!-- Element Plus 图标 -->
                <span class="ranking-name">{{ item.name }}</span>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomePage",
  data() {
    return {
      searchQuery: '',
      rankings: [
        {
          title: '活跃社团排行',
          items: [
            { id: 1, position: '1', name: '大象社团' },
            { id: 2, position: '2', name: '编程社' },
            { id: 3, position: '3', name: '摄影爱好者' }
          ]
        },
        {
          title: '人气社团排行',
          items: [
            { id: 4, position: '1', name: '篮球社' },
            { id: 5, position: '2', name: '舞蹈社' },
            { id: 6, position: '3', name: '音乐社' }
          ]
        },
        {
          title: '新成立社团排行',
          items: [
            { id: 7, position: '1', name: '吉他社' },
            { id: 8, position: '2', name: '书法社' },
            { id: 9, position: '3', name: '棋艺社' }
          ]
        }
      ]
    };
  },
  methods: {
    goToClubList() {
      this.$router.push({ name: "ClubList" });
    },
    goToSearchResult() {
      this.$router.push({ name: "SearchResult", query: { keyword: this.searchQuery } });
    },
  }
};
</script>

<style scoped>
/* 页面基础样式 */
.home-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fffbe6; /* 暖黄色背景 */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 1200px;
  margin: 20px auto;
  width: 100%;
  box-sizing: border-box; /* 边框计算在宽度内 */
}

/* 标题样式 */
h1 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

/* 搜索栏样式 */
.search-bar {
  position: relative;
  width: 90%;
  max-width: 600px;
  margin-bottom: 40px;
  padding: 10px 15px;
  background-color: #ffffff;
  border-radius: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-bar /deep/ .el-input__inner {
  height: 48px;
  padding: 0 15px;
  border: none;
  font-size: 16px;
  border-radius: 24px 0 0 24px;
}

.search-bar /deep/ .el-input__append {
  background-color: #f59e0b;
  border: none;
  color: #ffffff;
  border-radius: 0 24px 24px 0;
}

/* 更多社团链接样式 */
.more-clubs-link {
  display: inline-block;
  margin: 20px 0;
  padding: 8px 15px;
  background-color: #f59e0b;
  color: #ffffff;
  border-radius: 24px;
  text-decoration: none;
  transition: background-color 0.3s;
}

.more-clubs-link:hover {
  background-color: #e08b0b;
}

/* 排行榜容器样式 */
.rankings-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 40px;
}

/* 排行榜项样式 */
.ranking-category {
  flex: 0 0 calc(33.3% - 20px); /* 强制三列布局并减去间隔 */
  margin: 10px;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.ranking-category:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* 响应式设计 */
@media (max-width: 992px) {
  .ranking-category {
    flex-basis: calc(50% - 20px); /* 两列布局 */
  }
}

@media (max-width: 576px) {
  .ranking-category {
    flex-basis: 100%; /* 单列布局 */
  }
}
</style>
